import React from 'react';
import { Form, Select, Button, Card, Radio } from 'antd';
import { connect } from 'dva';

import styles from './index.less';

const { Option } = Select;
const namespace = 'ApprovalTime';
/**
 *  登录界面
 */
@connect(({ loading }) => ({
  loading
}))
@Form.create()
class ApprovalTime extends React.Component {
  state = {
    reminder: ''
  };
  // save
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        values = {
          ...values,
          hours12: 0,
          hours24: 0,
          hours36: 0,
          hours48: 0,
          hours72: 0,
          due12: 0,
          due24: 0,
          due36: 0,
          due72: 0
        };
        values[`due${values.approvalReminder}`] = 1;
        values[`hours${values.approvalTime}`] = 1;
        delete values.approvalReminder;
        delete values.approvalTime;
        this.props.dispatch({
          type: `${namespace}/ApprovaltimeSave`,
          payload: {
            ...values,
            shopId: userInfo.shopId
          }
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px'
    };
    return (
      <div className={styles.ApprovalTime}>
        <Form onSubmit={this.handleSubmit} className={styles.listCard}>
          <Card title="Approval time" bordered={false}>
            <h4>Please select the pending approval time</h4>
            <Form.Item>
              {getFieldDecorator('approvalTime', {
                rules: [{ required: true, message: 'Please input your Approval time!' }]
              })(
                <Select style={{ width: '240px' }} placeholder="Please input your Approval time!">
                  <Option value={12}>12 hours</Option>
                  <Option value={24}>24 hours</Option>
                  <Option value={36}>36 hours</Option>
                  <Option value={48}>48 hours</Option>
                  <Option value={72}>72 hours</Option>
                </Select>
              )}
            </Form.Item>
            <h4>Customer will be informed of the approval time</h4>
          </Card>
          <Card title="Approval reminder" bordered={false}>
            {/* 为即将到期的审批设置提醒时间 */}
            <h4>Set the reminder time for approvals that are due soon</h4>
            {getFieldDecorator('approvalReminder', {
              rules: [{ required: true, message: 'Please input your Approval reminder!' }],
              initialValue: this.state.reminder
            })(
              <Radio.Group onChange={this.onChange}>
                <Radio style={radioStyle} value={12}>
                  12 hours before return approval is due
                </Radio>
                <Radio style={radioStyle} value={23}>
                  24 hours before return approval is due
                </Radio>
                <Radio style={radioStyle} value={36}>
                  36 hours before return approval is due
                </Radio>
                <Radio style={radioStyle} value={72}>
                  72 hours before return approval is due
                </Radio>
              </Radio.Group>
            )}
          </Card>

          <Form.Item
            style={{
              display: 'flex',
              justifyContent: 'center'
            }}
          >
            <Button
              style={{ padding: '0 80px', color: '#fff', background: '#333' }}
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              Save
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
export default ApprovalTime;
